<template>
    <div class="home-stats">
      <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
        <div 
          v-for="stat in stats" 
          :key="stat.label"
          class="text-center"
        >
          <div :class="stat.icon" class="text-5xl mb-3 text-primary-600" />
          <div class="text-3xl font-bold text-gray-900 mb-2">
            {{ stat.value }}
          </div>
          <div class="text-gray-600">{{ stat.label }}</div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  const stats = [
    { label: '项目总数', value: '1000+', icon: 'i-mdi-code-tags' },
    { label: '注册用户', value: '50k+', icon: 'i-mdi-account-group' },
    { label: '技术文档', value: '500+', icon: 'i-mdi-book-open' },
    { label: '下载次数', value: '100k+', icon: 'i-mdi-download' },
  ]
  </script>